<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>高清无码管理系统 - Layui</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2730551_8ulmf77v4r8.css">
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
  #iconfont {
    font-size: 30px;
    color: rgb(163, 21, 21);
  }

  #iconfont1 {
    font-size: 30px;
    color: rgb(58, 62, 129);
  }

  #iconfont2 {
    font-size: 30px;
    color: rgb(42, 21, 163);
  }

  #iconfont3 {
    font-size: 30px;
    color: rgb(13, 197, 38);
  }

  #iconfont4 {
    font-size: 30px;
    color: rgb(15, 157, 223);
  }

  #iconfont5 {
    font-size: 30px;
    color: rgb(145, 223, 20);
  }

  #iconfont6 {
    font-size: 30px;
    color: rgb(238, 197, 13);
  }

  #iconfont7 {
    font-size: 30px;
    color: rgb(228, 15, 174);
  }

  #iconfont8 {
    font-size: 30px;
    color: rgb(235, 139, 13);
  }

  i {
    /* 文字跟图片对齐 */
    vertical-align: middle;
    padding: 1px;
  }

  /* 覆盖layuicssde左外边距3 */
  #con {
    margin-left: 0px
  }
</style>

<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 引入公共页面 -->
    {{include "./common/header.html" }}


    <!-- 引入公共页面 -->
    {{include "./common/side_menu.html" }}

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div>


        <div style="padding:15px;">
          <div class="layui-input-inline" style="display: flex;">
            <input style="width: 200px;" class="layui-input" type="text" id="title" placeholder="输入文章标题进行搜索">

            <select id="state" class="form-control" style="
                display: inline-block;
                width: 200px;
            ">
              <option value="">全部状态</option>
              <option value="0">待审核</option>
              <option value="1">审核通过</option>
              <option value="2">审核失败</option>
            </select>


            <button class="layui-btn" id="search">搜索</button>
          </div>

        </div>

        <table border="1px" rules="all" style="margin:  auto ; text-align: center;"
          class="layui-table table-hover  ">
          <tr>

            <td><i class="iconfont icon-xuhao" id="iconfont"></i>序号</td>

            <td><i class="iconfont icon-biaoti1 " id="iconfont"></i>标题</td>
            <td><i class="iconfont icon-category01 " id="iconfont1"></i>分类</td>
            <td><i class="iconfont icon-category01 " id="iconfont2"></i>图片</td>
            <td><i class="iconfont icon-zuozhe " id="iconfont3"></i>作者</td>
            <td><i class="iconfont icon-neirong " id="iconfont4"></i>内容</td>
            <td><i class="iconfont icon-zhuangtai " id="iconfont5"></i>状态</td>
            <td><i class="iconfont icon-shijian " id="iconfont6"></i>添加时间</td>
            <td><i class="iconfont icon-xiugaishijian " id="iconfont7"></i>修改时间</td>
            <td><i class="iconfont icon-caozuo " id="iconfont8"></i>操作</td>

          </tr>
        </table>
        <tbody>

        </tbody>
        <div id="mypage"></div>
      </div>
    </div>

  </div>
  <script src="https://momentjs.bootcss.com/downloads/moment.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.9.0/js/lightbox-plus-jquery.min.js"></script>
  <script>
    let curr = 1;
    let limit = 3;
    let laypage;
    let title;
    let state;
    let isSearch = false;
    let statusTextMap = {
      0: '<span class="layui-bg-orange">待审核</span>',
      1: '<span class="layui-bg-green">审核通过</span>',
      2: '<span class="layui-bg-black">审核失败</span>'
    }
    //发送ajax，获取分页的数据
    function getArticleData(curr, limit, callback, where = {}) {
      //合并查询参数
      let params = Object.assign({ curr, limit }, where)
      $.get('/articleCount', params, function (res) {
        callback && callback(res)
      }, 'json');
    }
    // 渲染表格数据
    function renderTable(data) {
      let tbodyHtml = '';
      data.forEach((item, index) => {
        index = index + 1;
        let {
          id,
          title,
          name,
          img,
          author,
          state,
          addtime,
          duplicate,
        } = item;
        addtime = moment.unix(addtime).format("YYY-MM-DD")
        duplicate = moment.unix(duplicate).format('YYY-MM-DD')
        let copyTtem = JSON.stringify(item);
        tbodyHtml += `<tr>
            <td>${index}</td>
            <td>${title}</td>
            <td>${name}</td>
            <td>
              <a href="/${img}" data-lightbox="preview" data-title="${title}">
              <img src="/${img}"  width="50px" height="50px" style="border-radius:50%" alt="">
              </a>
              </td>
            <td>${author}</td>
            <td>
              <a href="/detail?id=${id}">查看详情</a>
              <button class="layui-btn layui-btn-sm showContent" data-item='${copyTtem}''>查看全文</button>
            </td>

            <td>
            
            </td>
            <td>${statusTextMap[state]}</td>
            <td>${duplicate}</td>
            <td>${addtime}</td>
            <td>
              <a href="/edit?id=${id}" id="edit"
                class="layui-btn layui-btn-radius layui-border-orange layui-btn-sm ">编辑</a>
              <!-- <a href="javascript:;" onclick="confirmDelete('${id}','${img}');" id="delt"
                class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger ">永久删除</a> -->

              <a href="/recycle?id=${id}" onclick="return confirm('确实加入回收站');" id="recycle"
                class="layui-btn layui-btn-radius layui-btn-norma  layui-border-black layui-btn-sm ">加入回收站</a>

              <a href="javascript:void(0)" onclick="ajaxDelete(this,'${id}','{$img}')"
                class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger ">ajax永久删除</a>

                <a href="/editContent?id=${id}" class="layui-btn  layui-btn-sm layui-btn-radius" id="con">设置内容</a>
            </td>
          </tr>`;
      })
      return tbodyHtml;
    }
    //渲染分页的结构
    function renderPage(laypage, ele, count, limit) {
      laypage.render({
        elem: ele,
        count,
        limit,
        jump: function (obj, first) {
          let { curr, limit } = obj;
          if (isSearch) { return; }
          getArticleData(curr, limit, res => {
            let tbody = renderTable(res.data)
            $("tbody").html(tbody);
          })
        }
      })
    }
    layui.use('laypage', function () {
    laypage = layui.laypage;
      getArticleData(curr, limit, res => {
        let { count, data } = res;
        renderPage(laypage, 'mypage', count, limit)
      })
    })

    //普通删除
    function confirmDelete(id, img) {

      let result = layer.confirm('确认永久删除吗 数据不可以还原', {
        btn: ['是的', '取消'],
        shadeClose: true,
        shade: [0.3, '#000']
      }, () => {
        location.href = "/delete?id=" + id + "&img" + img
      },
        () => {
          layer.msg('取消了', { icon: 1 })
        });


    }

    //ajax异步删除
    function ajaxDelete(ele, id, img) {
      let result = layer.confirm('确认删除吗?', {
        btn: ['是的', '取消'],
        shadeClose: true,
        shade: [0.3, '#000']
      }, () => {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (this.readyState === 4 && this.status === 200) {
            let data = JSON.parse(this.responseText)
            let { errcode, massage } = data;
            if (errcode === 200) {
              //删除成功
              $(ele).parents('tr').remove()
              setTimeout(function () {
                layer.msg("删除成功", { icon: 1 })
              }, 500)
              layer.closeAll();
            } else if (errcode === 304) {
              layer.msg(message)
              location.href('/login')
            }
          } else {
            layer.msg("删除失败")
          }
        }
        xhr.open('post', '/ajaxdelete', true)
        xhr.setRequestHeader("Content-type", 'application/x-www-form-urlencoded')
        xhr.send("id=" + id + "&img=" + img + "$flag=ajax")
      },
        () => {
          layer.msg('取消了', { icon: 1 })
        });

    }

    //JS 
    layui.use(['element', 'layer', 'util'], function () {
      var element = layui.element
        , layer = layui.layer
        , util = layui.util
        , $ = layui.$;

      //头部事件
      util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function (othis) {
          layer.msg('展开左侧菜单的操作', { icon: 0 });
        }
        , menuRight: function () {
          layer.open({
            type: 1
            , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
            , area: ['260px', '100%']
            , offset: 'rt' //右上角
            , anim: 5
            , shadeClose: true
          });
        }
      });

    });


    // 查看全文
    $("tbody").on('click', ".showContent", function () {
      let data = JSON.parse($(this).attr('data-item'))
      let { name, content, author } = data;
      // 组装内容
      let htmlStr = `
        <div style="padding:10px;">
          <h2 style='text-align:center'>${name}</h2>
          <h2 style='text-align:center'>作者： ${author}</h2> 
          <p>${content}</p>
        <div>
      `;
      layer.open({
        type: 1,
        shadeClose: true,
        area: ['820px', '540px'], //宽高
        content: htmlStr
      });
    })
   //  实现搜索功能
   $("#search").on('click',function(){
      // title = $("#title").val();
      title = document.getElementById('title').value
      state = $("#state").val();
      // 发送搜索请求
      isSearch = true; // 说明点击了按钮
      getArticleData(curr,limit,function(res){
        let {count,data} = res;
        // 重新渲染分页和表格数据
        renderPage(laypage,'mypage',count,limit)
        isSearch = false;
        let tbody = renderTable(data)
        $("tbody").html(tbody);
      },{title,state})
    })
  </script>
</body>

</html>